<template>
  <section class="vbox">
    <section class="scrollable">
      <div class="pos-rlt animated fadeInDownBig " style="height: auto;">
        <div tile-id="1" class="pos-abt" style="width: 614px; height: 614px;">
          <billboard number='1' fade-in-type='fadeInDown'></billboard>

        </div>
        <div tile-id="2" class="pos-abt" style="left: 614px; width: 307px; height: 614px;">
          <billboard number='0' fade-in-type='fadeInUp' img='m32.jpg'></billboard>
        </div>
        <div tile-id="3" class="pos-abt" style="left: 921px; width: 307px; height: 307px; top: 0px;">
          <billboard number='2' fade-in-type='fadeInLeft' img='m16.jpg'></billboard>

        </div>
        <div tile-id="4" class="pos-abt" style="left: 1228px; width: 307px; height: 307px; top: 0px;">
          <billboard number='3' fade-in-type='fadeInDown' img='m3.jpg' position='up'></billboard>

        </div>
        <div tile-id="5" class="pos-abt" style="left: 1535px; width: 307px; height: 307px; top: 0px;">
          <billboard number='4' fade-in-type='fadeInRight' img='m6.jpg'></billboard>
        </div>
        <div tile-id="6" class="pos-abt" style="left: 921px; top: 307px; width: 307px; height: 307px;">
          <billboard number='5' fade-in-type='fadeInDown' img='m10.jpg'></billboard>
        </div>
      </div>
      <div class="pos-rlt animated fadeInUpBig" style="height: auto;">
      <div tile-id="7" class="pos-abt" style="left: 1228px; top: 307px; width: 307px; height: 307px;">
        <billboard number='6' fade-in-type='fadeInUp' img='m15.jpg'></billboard>
      </div>
      <div tile-id="8" class="pos-abt" style="left: 1535px; top: 307px; width: 307px; height: 614px;">
        <billboard number='7' fade-in-type='fadeInRight' img='m30.jpg'></billboard>
      </div>
      <div tile-id="9" class="pos-abt" style="top: 614px; width: 307px; height: 307px;">
        <billboard number='8' fade-in-type='fadeInLeft' img='m19.jpg'></billboard>
      </div>
      <div tile-id="10" class="pos-abt" style="left: 307px; top: 614px; width: 307px; height: 307px;">
        <billboard number='9' fade-in-type='fadeInDown' img='m0.jpg'></billboard>
      </div>
      <div tile-id="11" class="pos-abt" style="left: 614px; top: 614px; width: 307px; height: 307px;">
        <billboard number='10' fade-in-type='fadeInUp' img='m7.jpg' position='up'></billboard>
      </div>
      <div tile-id="12" class="pos-abt" style="left: 921px; top: 614px; width: 307px; height: 307px;">
        <billboard number='11' fade-in-type='fadeInRight' img='m18.jpg' ></billboard>
      </div>
      <div tile-id="13" class="pos-abt" style="left: 1228px; top: 614px; width: 307px; height: 614px;">
        <billboard number='12' fade-in-type='fadeInDown' img='m32.jpg'></billboard>
      </div>
      <div tile-id="14" class="pos-abt" style="top: 921px; width: 614px; height: 307px;">
        <billboard number='13' fade-in-type='fadeInLeft' img='m40.jpg'></billboard>
      </div>
      <div tile-id="15" class="pos-abt" style="left: 614px; top: 921px; width: 614px; height: 614px;">
        <billboard number='14' fade-in-type='fadeInUp' img='m17.jpg' ></billboard>
      </div>
      <div tile-id="16" class="pos-abt" style="left: 1535px; top: 921px; width: 307px; height: 307px;">
        <billboard number='15' fade-in-type='fadeInRight' img='m5.jpg' position='up'></billboard>
      </div>
      <div tile-id="17" class="pos-abt" style="top: 1228px; width: 307px; height: 307px; left: 0px;">
        <billboard number='16' fade-in-type='fadeInLeft' img='m1.jpg'></billboard>
      </div>
      <div tile-id="18" class="pos-abt" style="left: 307px; top: 1228px; width: 307px; height: 307px;">
        <billboard number='17' fade-in-type='fadeInLeft' img='m4.jpg'></billboard>
      </div>
      <div tile-id="19" class="pos-abt" style="left: 1228px; top: 1228px; width: 307px; height: 307px;">
        <billboard number='18' fade-in-type='fadeInLeft' img='m15.jpg' position='up'></billboard>
      </div>
      <div tile-id="20" class="pos-abt" style="left: 1535px; top: 1228px; width: 307px; height: 307px;">
        <billboard number='19' fade-in-type='fadeInRight' img='m6.jpg'></billboard>
      </div>
      <div tile-id="21" class="pos-abt" style="top: 1535px; width: 307px; height: 307px;">
        <billboard number='20' fade-in-type='fadeInLeft' img='m6.jpg' position='up'></billboard>
      </div>
      <div tile-id="22" class="pos-abt" style="left: 307px; top: 1535px; width: 614px; height: 307px;">
        <billboard number='21' fade-in-type='fadeInDown' img='m42.jpg'></billboard>
      </div>
      <div tile-id="23" class="pos-abt" style="left: 921px; top: 1535px; width: 307px; height: 307px;">
        <billboard number='22' fade-in-type='fadeInUp' img='m9.jpg'></billboard>
      </div>
      <div tile-id="22" class="pos-abt" style="left: 1228px; top: 1535px; width: 307px; height: 307px;">
        <billboard number='23' fade-in-type='fadeInDown' img='m8.jpg'></billboard>
      </div>
      <div tile-id="25" class="pos-abt" style="left: 1535px; top: 1535px; width: 307px; height: 307px;">
        <billboard number='24' fade-in-type='fadeInRight' position='up' img='m4.jpg'></billboard>
      </div>
      </div>
    </section>
  </section>
</template>

<script>
  import {mapActions, mapGetters} from 'Vuex'
  import loading from '../loading/loading.vue'
  import billboard from  '../player/billboard.vue'

  export default {
    components:{billboard},
    data() {
      return {
      }
    },
    ready() {

    },
    methods: {}
  }
</script>
<style>

</style>
